import { getRefer } from '@/apis/refer'
import { paginationConfig } from '@/utils'
import { Card, Breadcrumb, Table, Button } from 'antd'
import { useEffect, useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import {
  ExportOutlined
} from '@ant-design/icons'
import { ExportExcel } from '@/utils'

const Refer = () => {
  const columns = [
    {
      title: '序号',
      dataIndex: 'id',
      align: 'center',
      key: 'id',
      render: (text) => <div className='content'>{text}</div>
    },
    {
      title: '数据集名',
      dataIndex: 'name',
      align: 'center',
      key: 'name',
      render: (text) => <div className='content'>{text}</div>
    },
    {
      title: '客户数',
      dataIndex: 'c_num',
      align: 'center',
      key: 'c_num',
      render: (text) => <div className='content'>{text}</div>
    },
    {
      title: '容量类型',
      dataIndex: 'c_type',
      align: 'center',
      key: 'c_type',
      render: (text) => <div className='content'>{text}</div>
    },
    {
      title: '时间窗类型',
      dataIndex: 'w_type',
      align: 'center',
      key: 'w_type',
      render: (text) => <div className='content'>{text}</div>
    },
    {
      title: '解集数量',
      dataIndex: 'length',
      align: 'center',
      key: 'length',
      render: (text) => <div className='content'>{text}</div>
    },
    {
      title: <div className='title'>操作</div>,
      align: 'center',
      key: 'action',
      render: (_, record) => (
        <Button type='primary' onClick={() => clickFile(record)}>查看</Button>
      ),
    },
  ]

  const processData = (data) => {
    if (data) {
      return data.txt_files.map((item, index) => {
        let name = item
        let name_split = name.split('_')
        const res = {
          id: index + 1,
          key: index + 1,
          name: name,
          c_num: name_split[1],
          c_type: name_split[2],
          w_type: name_split[3],
          length: data.files_length[index]
        }
        return res
      })
    }
  }

  const [data, setData] = useState([])
  useEffect(() => {
    const getReferList = async () => {
      const res = await getRefer()
      setData(processData(res))
    }
    getReferList()
  }, [])

  // 点击查看
  const navigate = useNavigate()
  const clickFile = (record) => {
    navigate(`/refer/data?data_name=${record.name}`)
  }

  return (
    <div>
      <Card
        title={
          <Breadcrumb items={[
            { title: <Link to={'/'}>首页</Link> },
            { title: '参考解集' },
          ]}
            className='breadcrumb'
          />
        }
      >
        <Button type='primary' onClick={() => ExportExcel(columns, data, 'Refer')} icon={<ExportOutlined />}
          style={{
            marginTop: 5,
            marginBottom: 15
          }}
        >导出表格</Button>
        <Table
          bordered
          columns={columns}
          dataSource={data}
          scroll={{
            y: 'calc(100vh - 400px)',
            x: 'max-content',
          }}
          pagination={paginationConfig}
        >

        </Table>
      </Card>
    </div>
  )
}

export default Refer